<template>
  <div  class=" table-search-page" >
    <div class="g-tabs-wrapper">
      <a-tabs :activeKey="currentActiveKey" @change="changeTabs" type="line">
        <a-tab-pane :key="1" tab="门诊区"></a-tab-pane>
        <a-tab-pane :key="2" tab="住院区"></a-tab-pane>
      </a-tabs>
    </div>
    <a-card v-show="currentActiveKey===1" class="g-mt-10" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" :selfUpdate="true">
          <a-row :gutter="12">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
              <a-form-item label="开始时间">
                <a-range-picker allow-clear v-decorator="['time']" style="width: 100%;">
                  <a-icon slot="suffixIcon" type="calendar"/>
                </a-range-picker>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户卡号">
                <a-input v-decorator="['cardNo']" allow-clear placeholder="客户卡号"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="联系号码">
                <a-input v-decorator="['tel']" allow-clear placeholder="联系号码"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户姓名">
                <a-input v-decorator="['name']" style="width: 100%" allow-clear placeholder="姓名"/>
              </a-form-item>
            </a-col>
            <a-col :md="2" :lg="4" :sm="12">
              <div class="table-page-search-submitButtons g-flex" style="margin-bottom: 4px;">
                <a-icon :type="advanced ? 'up' : 'down'" @click="advanced=!advanced" style="margin-right: 15px;"/>
                <a-button type="primary" @click="clickSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="clickReset">重置</a-button>
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="12" v-show="advanced">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
              <a-form-item label="开发人员">
                <a-select
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['developer']"
                  placeholder="选择，搜索">
                  <a-select-option v-for="item in developerUser.userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="所属咨询">
                <a-select
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['consultMan']"
                  placeholder="选择，搜索">
                  <a-select-option v-for="item in allHisUser.userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户等级">
                <a-select
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['customerLevel']"
                  placeholder="客户等级">
                  <a-select-option v-for="item in customerLevel" :key="item.id" :label="item.name" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户状态">
                <a-select
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['customerState']"
                  placeholder="状态">
                  <a-select-option v-for="item in customerState" :key="item.id" :label="item.name" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <div v-show="currentActiveKey===1">
      <a-card :bordered="false">
        <super-table
          :pageSize="10"
          ref="table"
          :rowKey="(record,index)=> index"
          :columns="columns"
          :data="loadData"
        >
          <!--序号-->
          <template slot="index" slot-scope="text,record,index">
            <span>{{(queryParam.pageNum-1)*queryParam.pageSize+(index+1)}}</span>
          </template>
          <!--客户卡号-->
          <template slot="cardNo" slot-scope="text,record">
            <a class="g-f-14" @click="toCustomerDetails(text,record)">{{ text }}</a>
          </template>
          <!--治疗状态-->

          <template slot="treatState" slot-scope="text">
            <div class="g-flex g-y-center" v-if="text==0">
              <a-badge color="#3399FF" /> <span style="margin-left: 5px;color: #3399FF;">等待治疗</span>
            </div>
            <div class="g-flex g-y-center" v-else-if="text==1">
              <a-badge color="#FF0000" /><span tyle="margin-left: 5px;color: #FF0000;">开始治疗</span>
            </div>
            <div class="g-flex g-y-center" v-else-if="text==2">
              <a-badge color="#00C4A9" />  <span tyle="margin-left: 5px;color: #00C4A9;"> 治疗完成</span>
            </div>
            <span v-else>{{text}}</span>
          </template>
          <template slot="action" slot-scope="text,record">
            <div class="g-flex">
              <a-button class="g-bt-pad-0" type="link" @click="openDrawer(record)" >治疗详情</a-button>
              <a-button class="g-bt-pad-0" type="link" @click="clickInsertHospital(record,1)" >转入院</a-button>
            </div>
          </template>
        </super-table>
      </a-card>
    </div>
    <div v-show="currentActiveKey===2">
      <hospitalBed/>
    </div>
    <!--收费详情--弹窗-->
    <treatDrawer ref="treatDrawer" />
  </div>
</template>

<script>
import { AllHisUser, CustomerLevel, CustomerState } from '@/api/customer/customer'
import { dictTypeListForCode } from '@/api/modular/main/customer/customerTriage'
import { CustomerFeedback } from '@/api/modular/main/customer/customerReturnVisit'
import { SuperTable } from '@/components'
import moment from 'moment'
import treatDrawer from '@/views/workstation/nurse/detailsDrawer'
import { nurseStaffList,transferHospital} from '@/api/workstation/doctor'
import hospitalBed from '@/views/workstation/nurse/hospitalBed'
export default {
  components: {
    SuperTable,
    hospitalBed,
    treatDrawer
  },
  data() {
    return {
      loadData: parameter => {
        this.queryParam.pageNum = parameter.pageNum
        this.queryParam.pageSize = parameter.pageSize
        return nurseStaffList(this.queryParam).then(res => {
          this.loading = false//关闭加载
          return res
        })
      },
      form: this.$form.createForm(this),
      customerState: [],//客户状态
      customerLevel: [],//客户等级
      advanced: false, // 高级搜索 展开/关闭
      disabled: true, //是否禁用新增按钮
      columns: [
        { title: '序号', scopedSlots: { customRender: 'index' },width:80,fixed:'left' },
        { title: '治疗状态', dataIndex: 'treatState',scopedSlots: { customRender: 'treatState' },fixed:'left', ellipsis: true },
        { title: '客户卡号', dataIndex: 'cardNo', ellipsis: true ,scopedSlots: { customRender: 'treatState' }},
        { title: '姓名', dataIndex: 'name' },
        { title: '咨询师', dataIndex: 'consultMan',scopedSlots: { customRender: 'consultMan' } },
        { title: '治疗日期', dataIndex: 'treatDate',ellipsis: true },
        { title: '领料状态', dataIndex: 'state', ellipsis: true },
        { title: '操作', scopedSlots: { customRender: 'action' }, fixed:'right', width: 150}
      ],
      data: [],
      // 查询参数
      queryParam: {
        pageNum: 1,//第几页
        pageSize: 10,//每页中显示数据的条数
        beginTime: undefined,
        endTime: undefined,
      },
      loading: true, //加载状态,
      current_row_index: '',
      customerFeedback: {},
      allHisUser: {}, //回访人对象
      developerUser:{},//所属咨询
      currentActiveKey: 1,
      nurseBedList:[]
    }
  },
  created() {
    this.getBaseFormInfo()
  },
  methods: {
    moment,
    //点击查询-高级搜索
    clickSearch() {
      const form_values = this.form.getFieldsValue()
      const time = form_values.time
      if (time && time.length > 0) {
        form_values.beginTime = moment(time[0]).format('YYYY-MM-DD')
        form_values.endTime = moment(time[1]).format('YYYY-MM-DD')
        form_values.time=undefined
      }
      this.queryParam = Object.assign(this.queryParam,form_values)
      this.$refs.table.loadData()
    },
    clickReset() {
      this.form.resetFields()
      this.queryParam={}
      this.queryParam.pageSize=10
      this.queryParam.pageNum=1
    },
    openDrawer(record){
      this.$refs.treatDrawer.show(record)
    },
    clickInsertHospital(record,type=1){
      console.log(record)
      const _this =this
      this.$confirm({
        title: `确认将改客户转入院吗？`,
        content: h => <div style="color:#333333;fontSize:16px;" >客户姓名：{record.name}</div>,
        onOk() {
          const params = {
            treatId  :record.treatId,
            treatDrId :record.treatDrId,
            customerId:record.customerId,
          }
          transferHospital(params).then(res=>{
            if(res.code==200){
              _this.$message.success(res.message)
              _this.$refs.table.refresh(true)
            }else{
              _this.$message.info(res.message)
            }
          })
        },
      })
    },

    changeTabs(key) {
      this.currentActiveKey = key
    },
    //点击查看客户详情
    toCustomerDetails(text, record) {
      // console.log(record)
      this.$router.push({
        path: 'customer_details', query: {
          id: record.customerId,
          card_no: record.cardNo,
          customerName:record.customerName
        }
      })
    },
    //获取表单相关接口
    getBaseFormInfo() {
      CustomerFeedback().then(res => {
        this.customerFeedback = res
      })
      // dictTypeListForCode  AllHisUser  所属咨询
      dictTypeListForCode({code:"XCZXS"}).then((res) => {
      // console.log('全员员工接口',res)
      this.allHisUser = res
      })
      // 开发人员 
      dictTypeListForCode({code:"WLZXS"}).then((res) => {
      // console.log('全员员工接口',res)
      this.developerUser = res
      })
      CustomerLevel().then(res => {
        this.customerLevel = res
      })
      CustomerState().then(res => {
        this.customerState = res
      })
    }
  }

}
</script>

<style lang="less" scoped>
.nurse-container{
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: blue;
  z-index: 10;
}
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
  margin-bottom: 2px;
}

.currentRowClass {
  background: #e6f7ff;
}

/deep/ .ant-tabs-bar {
  border-bottom: none;
}

/deep/ .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
  right: -10px;
}
</style>